import React from 'react';
import { Table } from 'antd';
import { Link } from 'react-router' ; 
const { Column } = Table;

class UserList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            selectedRowKeys:[],
        }
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
        this.props.onSelectChange(selectedRowKeys);
    }

    handleTableChange = (pagination, filters, sorter) => {
        if (typeof(this.props.handleTableChange) === "function") {
            this.props.handleTableChange(pagination, filters, sorter);   
        }
    }

    render() {
        const { selectedRowKeys } = this.state;
            const rowSelection = {
                selectedRowKeys,
                onChange: this.onSelectChange,
                onSelect: (record, selected, selectedRows) => {
                    if ("onSelect" in this.props) {
                        this.props.onSelect(selectedRows);
                    }
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    if ("onSelect" in this.props) {
                        this.props.onSelect(selectedRows);
                    }
                }
            };

        return (
            <div>
                <Table 
                    rowKey={record => record.id}
                    rowSelection={rowSelection}
                    dataSource={this.props.data} 
                    pagination={this.props.pagination}
                    loading={this.props.loading}
                    onChange={this.handleTableChange}
                    showHeader={true}
                    >
                    <Column
                        title="ID"
                        dataIndex="id"
                        key="id"
                        render={ id => <Link to={`/admin/users/${id}`} > { id }  </Link> }
                    />
                    <Column
                        title="用户名"
                        dataIndex="username"
                        key="username"
                    />
                    <Column
                        title="别名"
                        dataIndex="nickname"
                        key="nickname"
                    />
                    <Column
                        title="Email"
                        dataIndex="email"
                        key="email"
                    />
                </Table>
            </div>
        );
    }
}

UserList.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default UserList;